<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="css/main.css">
		<title>Document</title>

		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	</head>

	<body>
		<input type="button" value="弹出弹框" id="btn01">
		<div class="pop_main" id="pop">
			<div class="pop_con">
				<div class="pop_title">
					<h3>系统提示</h3>
					<a href="#" id="shutoff">×</a>
				</div>
				<div class="pop_detail">
					<p class="pop_text">亲！请关注近期的优惠活动！</p>
				</div>
				<div class="pop_footer">

				</div>
			</div>
			<div class="mask"></div>
		</div>
	</body>
	<script type="text/javascript">
		// 展示
		$('#btn01').click(function() {
			$('#pop').show(1000)
			return false
		})
		// 隐藏
		$('#shutoff').click(function(){
			$('#pop').hide(1000)
		})
		
		$('body').click(function(){
			$('#pop').hide(1000)
		})
		
		$('.pop_con').click(function(){
			// 我没有写任何业务逻辑
			return false
		})
		
	</script>

</html>